<template>
    <div class="service_hall_box">
        <div class="user_info">
            <section class="ui_com_box ui_l">
                <p class="ui_com_title ui_info">账号信息</p>
                <p>电话号码 : {{userInfo.mobile}}</p>
                <p>公司名称 : {{userInfo.realName}}</p>
                <p>注册邮箱 : {{userInfo.email}}</p>
                <p>注册时间 : {{userInfo.createTime}}</p>
            </section>
            <section class="ui_com_box ui_m">
                <p class="ui_com_title ui_identity">会员身份</p>
                <p>会员级别 : 注册用户 <span class="red">升级会员>></span></p>
                <p>开通时间 : 未开通 <span class="red">立即开通>></span></p>
                <p>到期时间 : 1506382@qq.com</p>
            </section>
            <section class="ui_com_box ui_r">
                <p class="ui_com_title ui_kefu">我的客服</p>
                <p>客服代表 : 客服代表</p>
                <p>客服电话 : 400-1859959</p>
                <p>公司邮箱 : 1506382@qq.com</p>
            </section>
        </div>
        <div class="imgsolt"></div>
        <div class="list">
            <div class="list_l">
                <home-title title="今日热点" cls="graybg" size='gray'/>
                <!-- <template v-for="item in redianList.slice(0,8)"> -->
                <template v-for="item in 10">
                    <single-item-2 dot="true" info="德胜村微型薯大棚升级改造项目竞争德胜村微型薯大棚德胜村微型薯大棚升级改造项目竞争德胜村微型薯大棚" url="https://www.baidu.com/"/>
                </template>
            </div>
            <div class="list_r">
                <home-title title="今日热点" cls="graybg" size='gray'/>
                <!-- <template v-for="item in redianList.slice(0,10)"> -->
                <template v-for="item in 10">
                    <single-item-2 dot="true" info="德胜村微型薯大棚升级改造项目竞争德胜村微型薯大棚德胜村微型薯大棚升级改造项目竞争德胜村微型薯大棚" url="https://www.baidu.com/"/>
                </template>
            </div>
        </div>
    </div>
</template>

<script>
import HomeTitle from "@/components/HomeTitle.vue";
import SingleItem2 from "@/components/SingleItem2.vue";
import AccountCard from "../account/components/AccountCard"
import {getRegionArea} from "@/api/api"

  export default {
    name: "",
    components: {
      AccountCard,
      HomeTitle,
      SingleItem2,
    },
    inject: ['userInfo'],
    data() {
      const validateMail = (rule, value, callback) => {
        if (!value) {
          return callback(`${rule.meg}不能为空`);
        }
        callback();
      }

      return {
        oldTel: '13386663869',
        num: 0,
        formData: {
          tel: '',
          code: '',
        },
        rules: {
          tel: [{validator: validateMail, meg: '手机号', trigger: 'blur'}],
          code: [{validator: validateMail, meg: '验证码', trigger: 'blur'}]
        }
      }
    },
    computed: {
      accountTitle() {
        return `当前账号 : ${this.oldTel}`
      }
    },
    beforeDestroy() {
      clearInterval(this.timer)
    },
    async mounted() {
      await getRegionArea()
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log(this.formData);
            this.$message({
              message: '修改成功',
              type: 'success'
            })
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      queryCode() {
        if (this.num > 0) return;
        this.num = 60;
        this.timer = setInterval(() => {
          this.num--;
          if (this.num <= 0) {
            clearInterval(this.timer)
          }
        }, 1000)
      }
    }
  }
</script>

<style scoped lang="scss">
  .user_info{
    display: flex;
    width: 99.5%;
    height: 224px;
    background: #FFFFFF;
    box-shadow: 0px 1px 3px 0px rgba(73, 73, 73, 0.3);
    border-radius: 4px;
    .ui_com_box{
        width: 271px;
        height: 168px;
        padding-left: 15px;
        margin-top: 29px;

      p {
        white-space: nowrap;
      }
    }
    .ui_m{
        border-left: 1px dashed #D0D0D0;
        border-right: 1px dashed #D0D0D0;
    }
    p{
        font-size: 14px;
        color: #333333;
        line-height: 1.7;
    }
    .ui_com_title{
        font-size: 18px;
        font-weight: bold;
        height: 50px;
        padding-left: 69px;
        line-height: 50px;
        margin-bottom: 22px;
    }
    .red{
        color: #A00B0A;
        margin-left: 5px;
    }
    .ui_info{
      background: url(../../../assets/uc_account.png) no-repeat;
      background-size: 50px 50px;
    }
    .ui_identity{
      background: url(../../../assets/uc_huiyuan.png) no-repeat;
      background-size: 50px 50px;
    }
    .ui_kefu{
      background: url(../../../assets/uc_kefu.png) no-repeat;
      background-size: 50px 50px;
    }
  }
.imgsolt{
    width: 100%;
    height: 51px;
    background-color: #DFDFDF;
    border-radius: 4px;
    margin: 10px 0;
    padding-right: 10px;
}
.list{
    display: flex;
    .list_l,.list_r{
        width: calc(50% - 6px);
        height: 281px;
        box-shadow: 0px 1px 3px 0px rgba(136, 136, 136, 0.47);
    }
    .list_l{
        margin-right: 10px;
    }
    .list_r{
    }
}

//   uc_kefu.png
// uc_huiyuan.png
</style>